import React, { Component } from 'react'

import { reqResumeQuery, reqResumePush } from '../../api'

import { Card, Table, Icon, Modal, Input, message, notification } from 'antd'
import './index.less'

export default class Home extends Component {
  state = {
    loading: false,
    visible: false,
    boleUrl: 'http://bole.netease.com/#/app/position/detail/21476',
    nosUrl: '',
    data: []
  }
  UNSAFE_componentWillMount() {
    this.initColumns()
  }

  componentDidMount() {
    this.getData()
  }a

  initColumns = () => {
    this.columns = [
      {
        title: '简历id',
        dataIndex: 'uid',
        // width: 100
      },
      {
        title: '姓名',
        dataIndex: 'name',
        // width: 150
      },
      {
        title: '年龄',
        dataIndex: 'age',
        // width: 120
      },
      {
        title: '毕业院校',
        dataIndex: 'school',
        // width: 160
      },
      {
        title: '求职意向',
        dataIndex: 'expectJob',
        // width: 120
      },
      {
        title: '简历状态',
        dataIndex: 'status',
        // width: 150,
        render: (status) => (
          <span>正常</span>
        )
      },
      {
        title: '操作',
        fixed: 'right',
        children: [
          {
            title: '简历预览',
            width: 100,
            dataIndex: 'resumeNosKey',
            render: (dataIndex) => (
              <span className="icon">
                <a target="_blank" href={dataIndex}><Icon type="eye" /></a>
              </span>
            )
          },
          {
            title: '简历上传至bole',
            width: 140,
            key: 'upload',
            render: (record) => (
              <span className="icon" onClick={() => this.uploadResume(record)}>
                <Icon type="cloud-upload" />
              </span>
            )
          }
        ]
      }
    ];
  }

  getData = async () => {
    const result = await reqResumeQuery()
    if(result.code === 200) {
      this.setState({ data: result.data})
    }

  }

  // 上传简历
  uploadResume = (record) => {
    this.setState({ 
      visible: true
    })
  }

  realUploadResume = async () => {
    const { boleUrl } = this.state
    
    if(boleUrl.length !== 0) {
      const result = await reqResumePush()
      this.setState({ visible: false })
      notification.success({
        message: '简历上传中',
        top: 60,
        duration: 1
      })

      
    } else {
      message.warn('请填写伯乐岗位地址')
    }
    
  }

  render() {
    const { loading, visible, boleUrl, data } = this.state
    return (
      <Card>
        <Table
          rowKey="id"
          bordered
          loading={loading}
          dataSource={data}
          columns={this.columns}
          scroll={{ x: 'calc(700px + 50%)'}}
        />

        <Modal
          title="请输入bole岗位地址"
          visible={visible}
          onCancel={() => this.setState({ visible: false, boleUrl: '' })}
          onOk={() => this.realUploadResume()}
        >
          <Input value={boleUrl} onChange={(e) => this.setState({ boleUrl: e.target.value.trim()})}/>
        </Modal>
      </Card>
    )
  }
}
